<template>
	<view>
		<block v-if="hsgoodsid==true">
			<view class="text-nav df-cen-rl" :style="{ paddingLeft: padLeft + 'rpx', paddingRight: padRight + 'rpx', paddingTop: padTop + 'rpx', paddingBottom: padBottom + 'rpx' }">
				<view class="text-nav-title" style="font-size: 36rpx;">拼团专区</view>
				<view class="text-nav-right" @click="tomoreSpell">
					好友都在拼
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</block>
		<block v-if="query.type == 'FENXIAO_GOODS_LIST'">
			<view class="text-nav df-cen-rl" :style="{ paddingLeft: padLeft + 'rpx', paddingRight: padRight + 'rpx', paddingTop: padTop + 'rpx', paddingBottom: padBottom + 'rpx' }">
				<view class="text-nav-title" style="font-size: 36rpx;">分销专区</view>
				<view class="text-nav-right" @click="togoods_list">
					查看更多
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</block>

		<view class="goods-list" >
			<view
				class="goods-item animation-slide-bottom"
				:style="{ animationDuration: inx * 0.1 + 0.4 + 's' }"
				v-for="(item, inx) in goodsList"
				:key="inx"
				@click="diyGoodsBtn(item)"
			>
				<image :src="$Utils.img(item.sku_image)" mode="aspectFill" class="goods-item-img" :lazy-load="true"></image>
				<view class="goods-item-info">
					<view class="goods-item-title line-text-I">{{ item.sku_name }}</view>
					<view v-if="query.type == 'FENXIAO_GOODS_LIST'" class="yjshows">佣金￥{{item.commission_money}}</view>
					<view style="display: flex;align-items: center;margin-top: 10rpx;">
						<block v-if="hsgoodsid==false&&query.type != 'FENXIAO_GOODS_LIST'">
							<view class="goods-item-price " v-if="item.promotion_type==1">￥{{ item.discount_price }}</view>
							<view class="goods-item-price " v-else>￥{{ item.price }}</view>
							<view class="goods-market-price" v-if="item.promotion_type==1">￥{{ item.price }}</view>
							<view class="goods-market-price" v-if="Number(item.market_price) > 0&&item.promotion_type!=1">￥{{ item.market_price }}</view>
						</block>
						<block v-if="hsgoodsid!=false&&query.type != 'FENXIAO_GOODS_LIST'">
							<view class="goods-item-price">￥{{ item.pintuan_price }}</view>
							<view class="goods-market-price" v-if="item.price - item.pintuan_price>0">￥{{ item.price }}</view>
						</block>
						<block v-if="query.type == 'FENXIAO_GOODS_LIST'">
							<view class="fxinfos">		
								<view class="goods-item-price">￥{{ item.discount_price }}</view>
								<view class="cicon">
									<image :src="staticImgUrl + 'fenxiao/noc.png'" mode="" v-if="item.is_collect==0" :lazy-load="true"></image>
									<image :src="staticImgUrl + 'fenxiao/isc.png'" mode="" v-if="item.is_collect==1" :lazy-load="true"></image>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'goods-list',
	data() {
		return {
			goodsList: []
		};
	},
	props: {
		padLeft: {
			type: [Number, String],
			default: 30
		},
		padRight: {
			type: [Number, String],
			default: 20
		},
		padTop: {
			type: [Number, String],
			default: 20
		},
		padBottom: {
			type: [Number, String],
			default: 20
		},
		query: {
			type: Object,
			default: () => {
				return {};
			}
		},
		hsgoodsid:{
			type:Boolean,
			default:false
		},
		site_id:{
			type: [Number, String],
			default: 0
		}
	},
	methods: {
		diyGoodsBtn(val) {
			// console.log("val",val)
			if(this.hsgoodsid == false){
				this.$Router.push({
					path: '/shopPages/goods/detail',
					query: {
						goods_id: val.sku_id,
						is_id: val.sku_id,
						type: 1
					}
				});
			}else{
				this.$Router.push({
					path: '/shopPages/goods/pintuandetail',
					query: {
						sku_id:val.id
					}
				});
			}

		},
		tomoreSpell(){
			this.$Router.push({
				path: '/otherpages/pintuan/moreSpell'
			});
		},
		togoods_list(){
			this.$Router.push({
				path:'/otherpages/fenxiao/goods_list/goods_list'
			})
		}
	},
	mounted() {
		// console.log("query",this.query)
		if(this.query.type == "FENXIAO_GOODS_LIST"){
			let objs = {
				page: 1,
				page_size: 6
			}
			this.$Apis.fenxiaogoodspage(objs).then(res=>{
				this.goodsList = res.list
			})
			return
		}
		if(this.hsgoodsid == false){
			if(this.query.goodsId){
				let newIds = this.query.goodsId.toString();
				// console.log("newIds",newIds)
				// this.query.goodsId.length
				let newData = {
					page: 1,
					page_size: this.query.goodsId.length,
					site_id: this.site_id,
					goods_id_arr: newIds
				};
				// console.log("newData",newData)
				this.$Apis.getGoodsSku(newData).then(res => {
					// console.log("res=>",res)
					this.goodsList = res.list;
				});
			}
		}else{
			let objs = {
				page: 1,
				page_size: 4
			}
			this.$Apis.pintuangoodspage(objs).then(res=>{
				// console.log("res=>",res)
				this.goodsList = res.list
			})
		}

	}
};
</script>

<style lang="scss">
.goods-list {
	width: 100%;
	padding: 10rpx 24rpx;
	display: flex;
	flex-wrap: wrap;
	.goods-item {
		width: 48%;
		margin: 20rpx 1%;
		border-radius: 20rpx;
		background-color: #ffffff;
	}
	.goods-item-img {
		width: 100%;
		height: 340rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
	.goods-item-info {
		padding: 20rpx;
	}
	.goods-item-title {
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.goods-market-price {
		font-size: 20rpx;
		color: #999999;
		font-style: italic;
		text-decoration: line-through;
	}
	.goods-item-price {
		// margin-top: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ff364e;
		padding-right: 20rpx;
	}
}
.xszkstyle {
	border: 1rpx solid red;
	max-width: 120rpx;
	text-align: center;
	font-size: 18rpx;
}
.text-nav {
	.text-nav-right {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fd3b5c;
	}
}
.yjshows{
	width: 150rpx;
	height: 32rpx;
	background: rgba(#FD3B5C,0.3);
	border-radius: 16rpx;
	font-size: 14rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FD3B5C;
	text-align: center;
	line-height: 32rpx;
	white-space: nowrap;
	margin-top: 10rpx;
	text-overflow: ellipsis;
	overflow: hidden;
}
.cicon{
	width: 34rpx;
	height: 33rpx;
}
.cicon image{
	width: 100%;
	height: 100%;
}
.fxinfos{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
